<template>
<div id="personal-page">
    <div id="personal-page-info">
        <div id="personal-page-info-head">


          <el-card class="box-card" style="width: 100%;margin-left: 10px">
    <el-descriptions class="margin-top" title="个人信息" :column="3" :size="size">
    <el-descriptions-item label="用户昵称">{{this.userInfo.userNickName}}</el-descriptions-item>
    <el-descriptions-item label="用户名">{{this.userInfo.userName}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{this.genderRes}}</el-descriptions-item>
    <el-descriptions-item label="学院">{{this.userInfo.institute}}</el-descriptions-item>
    <el-descriptions-item label="专业">{{this.userInfo.speciality}}</el-descriptions-item>
    <el-descriptions-item label="年级">{{this.userInfo.grade}}</el-descriptions-item>
    <el-descriptions-item label="班级">{{this.userInfo.classNumber}}</el-descriptions-item>
    <el-descriptions-item label="联系电话">{{this.userInfo.phoneNumber}}</el-descriptions-item>

    </el-descriptions>
            <div class="modi-info">
              <el-button class="logout" style="background-color:#545c64;color: #fff7e6" @click="logout">注销</el-button>

              <router-link to="/personal-center/per-info">
                <el-button type="warning">修改信息</el-button>
              </router-link>
            </div>
          </el-card>

        </div>

    </div>
</div>
</template>
<script>
export default{
    name: 'PersonalCenterPage',
    data(){
        return{
            res:{
                message:'',
                code:'',
                data:''
            },
            userInfo:{
                userNickName:'',
                userName:'',
                gender:'',
                institute:'',
                speciality:'',
                grade:'',
                classNumber:'',
                phoneNumber:''
            },
            genderRes:'',
        }
    },
    created(){
        this.queryUserInfo();
    },
    methods:{
        queryUserInfo(){
            this.$axios.get("/user/get/"+sessionStorage.getItem("userId")).then((response)=>{
                this.res = response.data;
                this.userInfo = this.res.data;
                if(this.userInfo.gender == 0){
                    this.genderRes = '女';
                }else{
                    this.genderRes = '男'
                }
            }).catch((response)=>{
                console.log(response);
            })
        },
        logout(){
            this.$axios.get("/user/logout").then((response)=>{
                this.res = response.data;
                sessionStorage.removeItem('userId');
                if(this.res.code == '200'){
                    this.$message.success("注销成功");
                    this.$router.push('/');
                }else{
                    this.$message.error("注销失败");
                }
            }).catch((response)=>{
                console.log(response);
            })
        }
    }
}
</script>

<style lang="less" scoped>

#personal-page-info-head{
    width: 800px;
    height: 200px;
}
</style>
